<template>
  <div class="logisticsBillDetail">
    <div class="top">
      <div class="top_l">
        <div class="company">
          <img src="~@/assets/images/联系人@3x.png" class="logo" />
        </div>
        <div class="userinfo">
          <div>
            <span class="transportNumber">{{ detailParams.title }}</span>
            <i style="margin-left: 10px" type="primary" class="el-icon-copy-document" @click="copyTaskNumber" />
            <span class="taskStatus" :style="getStatusStyle(detailParams.status)">
              {{ getStatusText(detailParams.status) }}
            </span>
          </div>
          <span style="color: gray">{{ detailParams.updateTime }} {{ detailParams.updateBy }}</span>
        </div>
      </div>
      <div class="top_r">
        <el-button type="primary" @click="update">编辑</el-button>
        <el-button style="width: 70px" @click="deleteBtn">删除</el-button>
      </div>
    </div>

    <div class="bottom">
      <el-tabs v-model="activeName" @tab-click="tabHandleClick">
        <el-tab-pane label="帮助信息" name="0">
          <div class="content">
            <div class="left">
              <p class="title">内容</p>
              <el-row>
                <el-col span="18" class="mb20">{{ detailParams.content }}</el-col>
              </el-row>
              <p class="title">系统信息</p>
              <el-row>
                <el-col span="8" class="mb20">操作时间：{{ detailParams.updateTime }}</el-col>
                <el-col span="8" class="mb20">操作人：{{ detailParams.updateBy }}</el-col>
                <el-col span="8" class="mb20">创建人：{{ detailParams.createBy }}</el-col>
                <el-col span="8" class="mb20">创建时间：{{ detailParams.createTime }}</el-col>
              </el-row>
            </div>
            <div class="right">
              <p class="title">封面</p>
              <el-image
                :src="detailParams.coverOss.url"
                alt="封面图片"
                style="width: 50%"
                :preview-src-list="srcList"
              />
              <p class="title">文件</p>
              <div v-for="item in detailParams.ossList" :key="(item, ossId)" @click="previewFile(item)">
                <div class="item">
                  <i class="el-icon-document" />
                  <div class="fileName">{{ item.fileName }}</div>
                  <i class="el-icon-download" />
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="操作日志" name="2">
          <div style="background-color: #fff; padding: 0 0.3rem">
            <search-bar
              v-model="searchModel"
              :search-data="searchData"
              :config="searchData"
              @search="handleSearchSubmit"
              @searchReset="handleSearchReset"
            />
          </div>
          <div class="record">
            <LPTablePage
              ref="tablePage"
              :show-index="true"
              :table-data="tableData"
              :table-column="tableColumn"
              align="left"
              :total="total"
              :current-page="currentPage"
              :random-column-key="true"
              @handleSizeChange="handleSizeChange"
              @handleCurrentChange="handleCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 车辆 -->
    <base-dialog
      :visible="vehicleVisile"
      title="关联车辆"
      width="1200px"
      class="addDictDialog"
      @handleDialogSubmit="handleAuditSubmit"
      @handleDialogCancle="handleAuditCancle"
    />

    <!-- 审核 -->
    <base-dialog
      :visible="auditVisile"
      title="审核"
      width="640px"
      class="addDictDialog"
      @handleDialogSubmit="handleAuditSubmit"
      @handleDialogCancle="handleAuditCancle"
    >
      <el-form
        ref="auditParams"
        :model="auditParams"
        :rules="dictRule"
        label-width="120px"
        class="dictForm"
        label-position="top"
        size="medium"
      >
        <el-row :gutter="50">
          <el-col :span="24">
            <el-form-item label="审核结果:" prop="dictValue">
              <el-radio-group v-model="auditParams.resource">
                <el-radio label="通过" />
                <el-radio label="驳回" />
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核说明:" prop="dictValue">
              <el-input v-model.trim="auditParams.dictValue" type="textarea" :rows="2" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </base-dialog>
    <!-- 编辑or新增 -->
    <base-dialog
      :visible="addVisile"
      title="编辑物流公司"
      width="918px"
      class="addDictDialog"
      @handleDialogSubmit="handleAddSubmit"
      @handleDialogCancle="handleAddCancle"
    >
      <el-form
        ref="dictForm"
        :model="dictModel"
        :rules="dictRule"
        label-width="120px"
        class="dictForm"
        label-position="top"
        size="medium"
      >
        <el-row :gutter="50">
          <el-col :span="12">
            <el-form-item label="物流公司名称:" prop="dictValue">
              <el-input v-model.trim="dictModel.dictValue" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物流公司编号:" prop="dictValue">
              <el-input v-model.trim="dictModel.dictValue" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一社会信用代码:" prop="remark">
              <el-input v-model="dictModel.remark" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人:" prop="remark">
              <el-input v-model="dictModel.remark" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在区域:" prop="remark">
              <el-input v-model="dictModel.remark" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址:" prop="remark">
              <el-input v-model="dictModel.remark" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联用户帐号:" prop="systemType">
              <el-select v-model="dictModel.systemType" style="width: 100%" placeholder="关联用户帐号" filterable>
                <el-option
                  v-for="(item, index) in systemOptions"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                />
              </el-select>
              <!-- <el-input  v-model="dictModel.system" readonly></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用:" prop="status">
              <el-switch v-model="dictModel.status" />
              <span class="ml20">关闭后物流公司在系统停止使用</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </base-dialog>
    <!-- 取消 -->
    <base-dialog
      :visible="deleteVisile"
      :title="deleteDialogTitle"
      width="440px"
      class="addDictDialog"
      @handleDialogSubmit="handleDeleteSubmit"
      @handleDialogCancle="handleDeleteCancle"
    >
      <el-row :gutter="50">
        <el-col :span="24" style="font-size: 15px"> 确定要删除吗？ </el-col>
      </el-row>
    </base-dialog>
  </div>
</template>

<script>
import LPTablePage from '@/components/LPTablePage'
import SearchBar from '@/components/SearchBar'
import baseDialog from '@/components/BaseDialog'
import ImagePreview from '@/components/ImagePreview'
import beiGangApi from '@/api/logistics/beigang'
export default {
  name: 'LogisticsBillDetail',
  components: {
    LPTablePage,
    SearchBar,
    baseDialog,
    ImagePreview
  },
  data() {
    return {
      deleteVisile: false,
      deleteDialogTitle: '删除',
      srcList: [],
      waybillData: {},
      vehicleVisile: false,
      addVisile: false,
      auditVisile: false,
      auditParams: {},
      dictModel: {},
      activeName: '0',
      searchModel: {},
      waybillSearchModel: {},
      companyData: [],
      auditTableData: [],
      materialTableData: [],
      waybillTableData: [],
      tableData: [],
      detailParams: {},

      imgurl: 'http://43.138.9.96:9000/ruoyi/2024/09/30/2d0d4f03fcbc47988fd60060532b68c4.png',
      total: 0,
      logisticsCompanyTotal: 0,

      currentPage: 1,
      logisticsCompanyCurrentPage: 1,
      waybillSearchData: [
        {
          placeholder: '运单状态',
          prop: 'documentStatus',
          type: 'select',
          options: [
            { label: '成功', value: '0' },
            { label: '失败', value: '1' }
          ]
        },
        {
          placeholder: '运输单号',
          prop: 'transportNumber'
        },
        {
          placeholder: '车牌号',
          prop: 'licensePlate'
        },
        {
          placeholder: '司机姓名',
          prop: 'driverName'
        },
        {
          prop: 'logisticsCompany',
          type: 'select',
          placeholder: '物流公司',
          options: []
        },
        {
          label: '创建时间',
          prop: 'createTime',
          type: 'datetimerange',
          startPlaceholder: '起始时间',
          endPlaceholder: '结束时间'
        },
        {
          prop: 'search',
          type: 'button'
          // policy: ['system.log.query'],
        }
      ],
      searchData: [
        { placeholder: '操作', prop: 'ipaddr' },
        { placeholder: '操作事件', prop: 'userName' },
        { placeholder: '操作人', prop: 'aa' },
        {
          label: '操作时间',
          prop: 'loginTime',
          type: 'datetimerange',
          startPlaceholder: '起始时间',
          endPlaceholder: '结束时间'
        },
        {
          prop: 'search',
          type: 'button'
          // policy: ['system.log.query'],
        }
      ],
      materialTableColumn: [
        { label: '物料类型', prop: 'infoId' },
        { label: '物料编号', prop: 'materialCode' },
        { label: '物料描述', prop: 'materialDescription' },
        { label: '单位', prop: 'ipaddr' },
        { label: '计划量(吨)', prop: 'plannedQuantity' },
        { label: '已完成量(吨)', prop: 'completedQuantity' },
        { label: '未完成量(吨)', prop: 'remainingQuantity' },
        { label: '已派车量(吨)', prop: 'ipaddr' },
        { label: '未派车量(吨)', prop: 'ipaddr' }
      ],
      waybillTableColumn: [
        { label: '运输单号', prop: 'transportNumber' },
        { label: '单据状态', prop: 'documentStatus' },
        { label: '车牌号', prop: 'licensePlate' },
        { label: '司机姓名', prop: 'driverName' },
        { label: '司机手机号', prop: 'driverPhone' },
        { label: '物料名称', prop: 'materialDescription' },
        { label: '对方毛重(吨)', prop: 'externalGrossWeight' },
        { label: '对方净重(吨)', prop: 'externalNetWeight' },
        { label: '车型', prop: 'vehicleType' },
        { label: '是否集装箱', prop: 'isContainer' },
        { label: '是否金典', prop: 'isJindian' },
        { label: '置换类型', prop: 'swapType' },
        { label: '开卡单据', prop: 'cardDocument' },
        { label: '物流公司', prop: 'logisticsCompany' },
        { label: '创建时间', prop: 'createTime' },
        { label: '创建人', prop: 'createBy' },
        { label: '创建来源', prop: 'creationSource' },
        {
          label: '操作',
          prop: 'action',
          fixed: 'right',
          type: 'button',
          width: 100,
          buttons: [
            {
              label: '查看',
              type: 'text',
              color: 'rgba(0, 118, 255, 1)',
              method: 'handleDetail'
            },
            {
              label: '删除',
              type: 'text',
              color: '#ee3333',
              method: 'handleDelete'
            }
          ]
        }
      ],
      tableColumn: [
        { label: '操作时间', prop: 'infoId' },

        { label: '操作人', prop: 'userName' },
        { label: '操作', prop: 'ipaddr' },
        { label: '操作事件', prop: 'infoId' }
      ],
      dictRule: {
        dictValue: [{ required: true, trigger: 'blur', message: '必填' }]
      }
    }
  },
  watch: {
    $route(to, from) {
      const id = to.params.id
      if (id) {
        console.log(id)
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    previewFile(item) {
      // 支持预览的文件类型
      const supportedFormats = ['.docx', '.pdf', '.jpg', '.jpeg', '.png']

      // 获取文件扩展名
      const fileExtension = item.url ? item.url.split('.').pop().toLowerCase() : ''

      // 判断文件格式是否支持预览
      if (item.url && supportedFormats.includes(`.${fileExtension}`)) {
        window.open(item.url, '_blank') // 打开可预览的文件链接
      } else {
        this.$message.info('暂不支持预览') // 显示不支持预览的提示
      }
    },
    navigateToDetail(id, type) {
      if (type === 'taskNumber') {
        this.$router.push({ path: `/logistics/beiGang/transportDetail/${id}` })
      } else if (type === 'logisticsNumber') {
        this.$router.push({ path: `/logistics/beiGang/logisticsBillDetail/${id}` })
      } else if (type === 'transportNumber') {
        this.$router.push({ path: `/logistics/beiGang/transportBillDetail/${id}` })
      }
    },
    // 复制按钮
    copyTaskNumber() {
      const taskNumber = this.detailParams.taskNumber
      if (taskNumber) {
        navigator.clipboard
          .writeText(taskNumber)
          .then(() => {
            this.$message.success('任务编号已复制到剪贴板！')
          })
          .catch((err) => {
            console.error('复制失败:', err)
            this.$message.error('复制失败，请重试！')
          })
      }
    },
    getStatusText(status) {
      switch (status) {
        case '0':
          return '启用'
        case '1':
          return '禁用'
        default:
          return '未知状态'
      }
    },
    getStatusStyle(status) {
      switch (status) {
        case '0':
          return { color: '#7ec050', backgroundColor: '#e4ede5', padding: '2px 6px', borderRadius: '4px' }
        case '1':
          return { color: '#e47470', backgroundColor: '#eee5e8', padding: '2px 6px', borderRadius: '4px' }
        default:
          return { color: 'black', padding: '2px 6px', borderRadius: '4px' }
      }
    },
    /* 审核操作 start*/
    auditWay() {
      this.auditVisile = true
    },
    handleAuditSubmit() {
      this.$refs.auditParams.validate((valid) => {
        if (valid) {
          console.log('handleAddSubmit 验证通过', this.auditParams)
          return
          addDict(this.dictModel).then((res) => {
            if (!res.error) {
              this.$message.success('审核成功')
              this.auditVisile = false
            }
          })
        } else {
          this.$message.warning('审核失败')
          return false
        }
      })
    },
    handleAuditCancle() {
      this.auditParams = this.$options.data().auditParams
      this.resetForm('auditParams')
      this.auditVisile = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    /* 审核操作 end*/

    /* 关联车辆 start*/
    setVehicle() {
      this.vehicleVisile = true
    },
    /* 关联车辆  end*/

    /* 编辑车辆  start*/
    update() {
      const currentId = this.$route.params.id
      this.$router.push({ path: `/logistics/beiGang/helpCenterUpdate/${currentId}` })
    },
    handleAddSubmit() {
      this.$refs.dictForm.validate((valid) => {
        if (valid) {
          console.log('handleAddSubmit 验证通过', this.dictModel)
          editDict(this.dictModel).then((res) => {
            if (!res.error) {
              console.log('editDict', res)

              this.$message.success('编辑成功')
              this.handleAddCancle()
              // 重新查询
              this.getDictList()
            }
          })
        } else {
          return false
        }
      })
    },
    handleAddCancle() {
      this.dictModel = this.$options.data().dictModel
      this.resetForm('dictForm')
      this.addVisile = false
    },
    /* 详情 */
    getDetail() {
      const id = this.$route.params.id
      beiGangApi.gethelpCenterDetail(id).then((res) => {
        if (res.code == 200) {
          this.detailParams = Object.assign(res.data, {})
          this.srcList.push(res.data.coverOss.url)
          this.materialTableData = Array.isArray(res.data) ? res.data : [res.data]
        }
      })
    },
    //   删除
    deleteBtn() {
      this.deleteVisile = true
    },
    handleDeleteSubmit() {
      const currentId = this.$route.params.id
      beiGangApi.delHelpCenter(currentId).then((res) => {
        if (!res.error) {
          this.$message.success('删除成功')
          this.deleteVisile = false
          this.$router.push({ path: `/logistics/beiGang/helpCenter` })
        }
      })
    },
    // 查询关联车辆表格信息

    getlogisticsCompanyTableList() {
      const { pageSize } = this.$refs.logisticsCompanyTablePage
    },
    // 查询表格信息
    getTableList() {
      const { pageSize } = this.$refs.tablePage
    },
    tabHandleClick(tab, event) {
      console.log(tab, event)
    },
    logisticsCompanyHandleCurrentChange(v) {
      this.logisticsCompanyCurrentPage = v
      this.getlogisticsCompanyTableList()
    },
    logisticsCompanyHandleSizeChange(v) {
      this.pageSize = v
      this.logisticsCompanyCurrentPage = 1
      this.getlogisticsCompanyTableList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      this.getTableList()
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getTableList()
    },
    handleSearchSubmit() {
      this.currentPage = 1
      this.getTableList()
    },
    handleSearchReset() {
      this.currentPage = 1
      this.$refs.tablePage.clearSelection()
      this.getTableList()
    }
  }
}
</script>

<style lang="scss" scoped>
.logisticsBillDetail {
  padding: 30px;

  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .top_l {
      display: flex;

      .userinfo {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .transportNumber {
          font-size: 16px;
          font-weight: 700;
        }
        .taskStatus {
          margin-left: 10px;
          text-align: center;
        }
        .documentStatus {
          color: gray;
        }
      }
    }
  }
  .bottom {
    .planData {
      display: flex;
      gap: 20px;
      .info {
        display: flex;
        flex: 1;
        justify-content: space-around;
        align-items: center;
        height: 80px;
        background-color: #f5f7fa;
        &:nth-child(1) {
          flex-basis: 33.33%;
          flex-grow: 0;
        }

        &:nth-child(2) {
          flex-basis: auto;
          flex-grow: 1;
        }
        .data {
          text-align: center;
          .text {
            margin-bottom: 5px;
            color: #9c9ea0;
          }
          .figure {
            font-size: 18px;
            color: #000;
          }
        }
      }
    }
    .waybillData {
      display: flex;
      gap: 20px;
      .info {
        display: flex;
        flex: 1;
        justify-content: space-around;
        align-items: center;
        height: 80px;
        background-color: #f5f7fa;
        .data {
          text-align: center;
          .text {
            margin-bottom: 5px;
            color: #9c9ea0;
          }
          .figure {
            font-size: 18px;
            color: #000;
          }
        }
      }
    }
    .title {
      font-size: 18px;
      font-weight: 700;
    }
    .content {
      display: flex;
      .left {
        flex: 8;
      }
      .right {
        flex: 2;
        .item {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          width: 100%;
          height: 100px;
          border: 1px solid #f0f1f4;
          border-radius: 5px;
          .el-icon-document {
            margin: 0 10px;
            font-size: 60px;
            color: #919398;
          }
          .fileName {
            font-size: 15px;
            flex: 1; /* 确保占满可用空间 */
            overflow: hidden; /* 隐藏溢出内容 */
            word-break: break-all; /* 长单词换行 */
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 限制最多显示2行 */
            -webkit-box-orient: vertical;
            white-space: normal; /* 允许文字换行 */
            color: #333;
          }
          .el-icon-download {
            margin: 0 10px;
            font-size: 30px;
            color: #6d7cf7;
          }
        }
      }
    }
  }
}

.company {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #0076ff;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 0.5rem;
  margin-right: 16px;

  .logo {
    width: 51px;
    height: 51px;
  }
}
</style>
